<template>
  <div class="orders-page">
    <el-header class="header" height="70px">
      <div class="header-content">
        <div class="logo">
          <h1 @click="$router.push('/')" style="cursor: pointer;">周周淘商城</h1>
        </div>
        <div class="nav-actions">
          <el-button @click="$router.push('/products')" type="primary" plain>
            继续购物
          </el-button>
          <template v-if="userStore.token">
            <el-dropdown @command="handleUserCommand">
              <el-button type="primary">
                {{ userStore.userInfo?.username || '用户' }}
                <el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                  <el-dropdown-item command="orders">我的订单</el-dropdown-item>
                  <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </div>
      </div>
    </el-header>

    <el-main class="main-content">
      <div class="page-header">
        <h2>{{ isCheckoutMode ? '确认订单' : '我的订单' }}</h2>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item @click="$router.push('/')">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-if="!isCheckoutMode" @click="$router.push('/cart')">购物车</el-breadcrumb-item>
          <el-breadcrumb-item>{{ isCheckoutMode ? '确认订单' : '我的订单' }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <!-- 结算模式：显示购物车商品和地址选择 -->
      <div v-if="isCheckoutMode" class="checkout-content">
        <!-- 收货地址选择 -->
        <el-card class="checkout-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>收货地址</span>
              <el-button type="primary" size="small" @click="goToAddressManagement">
                管理地址
              </el-button>
            </div>
          </template>

          <!-- 地址列表 -->
          <div v-if="addresses.length > 0" class="address-selection">
            <div
              v-for="address in addresses"
              :key="address.id"
              class="address-item"
              :class="{ 'selected': selectedAddressId === address.id }"
              @click="selectAddress(address)"
            >
              <div class="address-info">
                <div class="contact-info">
                  <span class="contact-name">{{ address.contact }}</span>
                  <span class="contact-phone">{{ address.mobile }}</span>
                  <el-tag v-if="address.isDefault === 1" type="success" size="small">默认</el-tag>
                </div>
                <div class="address-detail">
                  {{ address.province }} {{ address.city }} {{ address.town }} {{ address.street }}
                </div>
                <div v-if="address.notes" class="address-notes">
                  备注：{{ address.notes }}
                </div>
              </div>
              <div class="address-radio">
                <el-icon v-if="selectedAddressId === address.id" style="color: #409eff;"><Check /></el-icon>
              </div>
            </div>
          </div>

          <!-- 无地址时显示 -->
          <div v-else class="no-address">
            <el-empty description="暂无收货地址">
              <el-button type="primary" @click="goToAddressManagement">去添加地址</el-button>
            </el-empty>
          </div>
        </el-card>

        <!-- 商品列表 -->
        <el-card class="checkout-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>商品清单</span>
            </div>
          </template>
          <div class="checkout-items">
            <div v-for="item in cartItems" :key="item.id" class="checkout-item">
              <img :src="item.image" :alt="item.name" class="item-image">
              <div class="item-info">
                <h4>{{ item.name }}</h4>
                <p v-if="item.spec && item.spec !== '{}' && item.spec.trim() !== ''">{{ item.spec }}</p>
                <span class="item-price">¥{{ formatPrice(item.price) }}</span>
              </div>
              <div class="item-quantity">
                x{{ item.num }}
              </div>
              <div class="item-subtotal">
                ¥{{ formatPrice(item.price * item.num) }}
              </div>
            </div>
          </div>
        </el-card>

        <!-- 订单摘要 -->
        <el-card class="checkout-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>订单摘要</span>
            </div>
          </template>
          <div class="order-summary">
            <div class="summary-item">
              <span>商品数量：</span>
              <span>{{ totalItems }} 件</span>
            </div>
            <div class="summary-item">
              <span>订单总额：</span>
              <span class="total-price">¥{{ formatPrice(totalPrice) }}</span>
            </div>
          </div>
        </el-card>

        <!-- 操作按钮 -->
        <div class="checkout-actions">
          <el-button @click="cancelCheckout">取消</el-button>
          <el-button
            type="primary"
            size="large"
            @click="createOrderFromCart"
            :loading="createOrderLoading"
            :disabled="!selectedAddressId"
          >
            立即购买
          </el-button>
        </div>
      </div>

      <!-- 订单列表模式 -->
      <div v-else>
        <!-- 订单状态筛选 -->
        <div class="order-filters">
          <el-tabs v-model="activeStatus" @tab-click="handleStatusChange">
            <el-tab-pane label="全部" name="all" />
            <el-tab-pane label="待付款" name="pending" />
            <el-tab-pane label="待发货" name="paid" />
            <el-tab-pane label="待收货" name="shipped" />
            <el-tab-pane label="已完成" name="completed" />
            <el-tab-pane label="已取消" name="cancelled" />
          </el-tabs>
        </div>

        <!-- 订单列表 -->
        <div class="orders-list" v-loading="loading">
          <el-card v-for="order in orders" :key="order.id" class="order-card" shadow="hover">
            <div class="order-header">
              <div class="order-info">
                <span class="order-number">订单号：{{ order.orderNumber }}</span>
                <span class="order-date">{{ order.createTime }}</span>
              </div>
              <div class="order-status">
                <el-tag :type="getStatusType(order.status)">{{ getStatusText(order.status) }}</el-tag>
              </div>
            </div>

            <div class="order-items">
              <div v-for="item in order.items" :key="item.id" class="order-item">
                <img :src="item.image" :alt="item.name" class="item-image">
                <div class="item-info">
                  <h4>{{ item.name }}</h4>
                  <p v-if="item.spec && item.spec !== '{}' && item.spec.trim() !== ''">{{ item.spec }}</p>
                  <span class="item-price">¥{{ formatPrice(item.price) }}</span>
                </div>
                <div class="item-quantity">
                  x{{ item.num }}
                </div>
                <div class="item-subtotal">
                  ¥{{ formatPrice(item.price * item.num) }}
                </div>
              </div>
              <div v-if="order.items.length === 0" class="no-items">
                <el-empty description="暂无商品详情" :image-size="60"></el-empty>
              </div>
            </div>

            <div class="order-footer">
              <div class="order-total">
                共 {{ order.totalItems }} 件商品，总计：¥{{ formatPrice(order.totalAmount) }}
              </div>
              <div class="order-actions">
                <el-button v-if="order.status === 'pending'" type="primary" size="small" @click="handlePayOrder(order)">
                  立即付款
                </el-button>
                <el-button v-if="order.status === 'shipped'" type="success" size="small" @click="handleConfirmReceipt(order)">
                  确认收货
                </el-button>
                <el-button v-if="order.status === 'pending' || order.status === 'paid'" type="danger" size="small" @click="handleCancelOrder(order)">
                  取消订单
                </el-button>
              </div>
            </div>
          </el-card>
          <el-empty v-if="!loading && orders.length === 0" description="暂无订单"></el-empty>
        </div>

        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            v-model:current-page="pagination.pageNo"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[5, 10, 20]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-main>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowDown, Check } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import { queryMyOrders, payOrder, confirmReceipt, cancelOrder, createOrder, queryOrderDetails } from '@/api/order'
import { queryMyCarts } from '@/api/cart'
import { getMyAddresses } from '@/api/address'
import type { OrderVO, OrderStatus, OrderFormDTO, OrderDetailVO } from '@/api/order'
import type { CartVO } from '@/api/cart'
import type { AddressDTO } from '@/api/address'
import type { PageResult } from '@/types/api'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

// 检查是否来自购物车结算
const isCheckoutMode = computed(() => {
  return route.query.from === 'cart' || route.query.mode === 'checkout'
})

const activeStatus = ref<OrderStatus | 'all'>('all')

// 订单数据
const orders = ref<OrderVO[]>([])
const loading = ref(false)
const createOrderLoading = ref(false)

// 购物车数据（用于结算）
const cartItems = ref<CartVO[]>([])

// 地址数据（用于结算）
const addresses = ref<AddressDTO[]>([])
const selectedAddressId = ref<number | null>(null)

// 订单表单
const orderFormRef = ref()
const orderForm = ref<OrderFormDTO>({
  addressId: 0,
  paymentType: 1,
  details: []
})

const pagination = ref({
  pageNo: 1,
  pageSize: 10,
  total: 0
})

// 计算属性
const totalItems = computed(() => {
  return cartItems.value.reduce((total, item) => total + item.num, 0)
})

const totalPrice = computed(() => {
  return cartItems.value.reduce((total, item) => total + (item.price * item.num), 0)
})

const handleUserCommand = (command: string) => {
  switch (command) {
    case 'profile':
      router.push('/profile')
      break
    case 'orders':
      router.push('/orders')
      break
    case 'logout':
      userStore.logout()
      ElMessage.success('已退出登录')
      router.push('/')
      break
  }
}

const handleStatusChange = () => {
  pagination.value.pageNo = 1 // Reset page number when status changes
  loadOrders()
}

const getStatusType = (status: OrderStatus) => {
  const statusMap: Record<OrderStatus, string> = {
    pending: 'warning',
    paid: 'info',
    shipped: 'primary',
    completed: 'success',
    cancelled: 'danger' // Add cancelled status
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status: OrderStatus) => {
  const statusMap: Record<OrderStatus, string> = {
    pending: '待付款',
    paid: '待发货',
    shipped: '待收货',
    completed: '已完成',
    cancelled: '已取消' // Add cancelled status
  }
  return statusMap[status] || '未知状态'
}

const handleSizeChange = (size: number) => {
  pagination.value.pageSize = size
  loadOrders()
}

const handleCurrentChange = (page: number) => {
  pagination.value.pageNo = page
  loadOrders()
}

// 格式化价格（将分转换为元）
const formatPrice = (price: number) => {
  return (price / 100).toFixed(2)
}

// 立即付款
const handlePayOrder = async (order: OrderVO) => {
  try {
    await ElMessageBox.confirm(`确定要支付订单 ${order.orderNumber} 吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    loading.value = true
    await payOrder(order.originalId)
    ElMessage.success('支付成功！')
    loadOrders() // 刷新订单列表
  } catch (error) {
    if (error !== 'cancel') {
      console.error('支付失败:', error)
      ElMessage.error('支付失败')
    }
  } finally {
    loading.value = false
  }
}

// 确认收货
const handleConfirmReceipt = async (order: OrderVO) => {
  try {
    await ElMessageBox.confirm(`确定要确认收货订单 ${order.orderNumber} 吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    loading.value = true
    await confirmReceipt(order.originalId)
    ElMessage.success('确认收货成功！')
    loadOrders() // 刷新订单列表
  } catch (error) {
    if (error !== 'cancel') {
      console.error('确认收货失败:', error)
      ElMessage.error('确认收货失败')
    }
  } finally {
    loading.value = false
  }
}

// 取消订单
const handleCancelOrder = async (order: OrderVO) => {
  try {
    await ElMessageBox.confirm(`确定要取消订单 ${order.orderNumber} 吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    loading.value = true
    await cancelOrder(order.originalId)
    ElMessage.success('订单已取消！')
    loadOrders() // 刷新订单列表
  } catch (error) {
    if (error !== 'cancel') {
      console.error('取消订单失败:', error)
      ElMessage.error('取消订单失败')
    }
  } finally {
    loading.value = false
  }
}

// 取消结算
const cancelCheckout = () => {
  router.push('/cart')
}

// 跳转到地址管理页面
const goToAddressManagement = () => {
  router.push('/address?from=orders')
}

// 选择地址
const selectAddress = (address: AddressDTO) => {
  selectedAddressId.value = address.id!
}

// 创建订单
const createOrderFromCart = async () => {
  try {
    if (!selectedAddressId.value) {
      ElMessage.warning('请选择收货地址')
      return
    }

    createOrderLoading.value = true

    // 准备订单数据
    const orderData: OrderFormDTO = {
      addressId: selectedAddressId.value,
      paymentType: 1, // 默认支付类型，可以根据需要调整
      details: cartItems.value.map(item => ({
        itemId: item.itemId,
        num: item.num
      }))
    };

    // 调用创建订单API
    const response = await createOrder(orderData);

    if (response.data && response.data.code === 200) {
      ElMessage.success('订单创建成功！请在规定时间内完成支付');
      // 跳转到支付页面，并传递订单ID和总金额
      router.push(`/pay?orderId=${response.data.data}&totalAmount=${totalPrice.value}`);
    } else {
      console.error('订单创建失败响应:', response);
      ElMessage.error(response.data.msg || '订单创建失败');
    }
  } catch (error) {
    console.error('创建订单请求异常:', error);
    ElMessage.error('创建订单失败');
  } finally {
    createOrderLoading.value = false;
  }
}

// 加载购物车数据（用于结算）
const loadCartItems = async () => {
  try {
    loading.value = true;
    const response = await queryMyCarts();
    console.log('购物车API响应:', response); // 调试日志

    const responseData = response.data

    // 检查是否是新的API格式（包含code字段）
    if (responseData && responseData.code !== undefined) {
      // 新格式：{code: 200, msg: "OK", data: [...]}
      if (responseData.code === 200 && responseData.data) {
        cartItems.value = responseData.data || []
      } else {
        console.error('购物车数据格式错误:', responseData)
        ElMessage.error(responseData.msg || '购物车数据格式错误')
      }
    } else if (responseData && Array.isArray(responseData)) {
      // 旧格式：直接返回数组
      cartItems.value = responseData
    } else {
      console.error('购物车数据格式错误:', responseData)
      ElMessage.error('购物车数据格式错误')
    }
  } catch (error) {
    console.error('加载购物车数据失败:', error)
    ElMessage.error('加载购物车数据失败')
  } finally {
    loading.value = false
  }
};

// 加载地址数据（用于结算）
const loadAddresses = async () => {
  try {
    const response = await getMyAddresses();
    if (response.data && response.data.code === 200) {
      addresses.value = response.data.data || [];
      // 自动选择默认地址
      const defaultAddress = addresses.value.find(addr => addr.isDefault === 1);
      if (defaultAddress) {
        selectedAddressId.value = defaultAddress.id!;
      }
    } else {
      console.error('地址数据格式错误:', response);
      ElMessage.error('地址数据格式错误');
    }
  } catch (error) {
    console.error('加载地址数据失败:', error);
    ElMessage.error('加载地址数据失败');
  } finally {
    loading.value = false;
  }
};

// 后端订单数据结构
interface BackendOrder {
  id: string
  totalFee: number
  paymentType: number
  userId: string
  status: number
  createTime: string
  payTime: string | null
  consignTime: string | null
  endTime: string | null
  closeTime: string | null
  commentTime: string | null
}

// 后端分页响应结构
interface BackendPageResult {
  list: BackendOrder[]
  total: string
  size: string
  current: string
  pages: string
}

// 加载订单数据
const loadOrders = async () => {
  try {
    loading.value = true
    const params = {
      pageNo: pagination.value.pageNo,
      pageSize: pagination.value.pageSize,
      status: activeStatus.value === 'all' ? undefined : activeStatus.value
    }
    const response = await queryMyOrders(params)
    if (response.data.code === 200) {
      const pageResult = response.data.data as unknown as BackendPageResult // Backend returns pagination format
      const ordersData: OrderVO[] = pageResult.list.map((order: BackendOrder) => ({
        id: parseInt(order.id), // Convert string ID to number
        userId: parseInt(order.userId), // Convert string userId to number
        orderNumber: order.id, // Using id as orderNumber for now
        originalId: order.id, // Keep original string ID for API calls
        status: getOrderStatusFromBackend(order.status), // Convert backend status to frontend status
        totalAmount: order.totalFee, // Frontend totalAmount from backend totalFee
        totalFee: order.totalFee, // Add totalFee to match OrderVO interface
        totalItems: 0, // Will be calculated from order details
        createTime: order.createTime,
        payTime: order.payTime || undefined,
        deliveryTime: order.consignTime || undefined,
        receiveTime: order.endTime || undefined,
        cancelTime: order.closeTime || undefined,
        items: [] // Will be loaded from order details
      }))

      // 为每个订单加载详情
      for (const order of ordersData) {
        try {
          const detailResponse = await queryOrderDetails(order.originalId)
          if (detailResponse.data.code === 200) {
            order.items = detailResponse.data.data || []
            order.totalItems = order.items.reduce((total, item) => total + item.num, 0)
          }
        } catch (error) {
          console.error(`加载订单 ${order.orderNumber} 详情失败:`, error)
        }
      }

      orders.value = ordersData
      pagination.value.total = parseInt(pageResult.total) || 0
    } else {
      console.error('订单数据格式错误:', response)
      ElMessage.error('订单数据格式错误')
    }
  } catch (error) {
    console.error('加载订单数据失败:', error)
    ElMessage.error('加载订单数据失败')
  } finally {
    loading.value = false
  }
}

// 转换后端状态码为前端状态
const getOrderStatusFromBackend = (status: number): OrderStatus => {
  // 根据后端状态码映射到前端状态
  // 需要根据实际后端状态码定义进行映射
  switch (status) {
    case 1: return 'pending' // 待付款
    case 2: return 'paid' // 待发货
    case 3: return 'shipped' // 待收货
    case 4: return 'completed' // 已完成
    case 5: return 'cancelled' // 已取消
    default: return 'pending'
  }
}

// 生命周期钩子
onMounted(() => {
  // 检查用户是否已登录
  if (!userStore.token) {
    ElMessage.warning('请先登录');
    router.push('/login');
    return;
  }

  if (isCheckoutMode.value) {
    // 结算模式：加载购物车数据和地址数据
    loadCartItems();
    loadAddresses();
  } else {
    // 订单列表模式：加载订单数据
    loadOrders();
  }
})

const filteredOrders = computed(() => {
  // With API pagination and filtering, this computed property might not be strictly necessary
  // if the API returns exactly what's needed. However, if the API returns more data than
  // what's displayed on the current page or if there's client-side filtering needed
  // based on other criteria, this can be adapted.
  // For now, assuming `orders.value` already contains the filtered/paginated data from the API.
  return orders.value
})

</script>

<style scoped>
.orders-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo h1 {
  color: #409eff;
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}

.nav-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.main-content {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #333;
}

/* 结算模式样式 */
.checkout-content {
  max-width: 800px;
  margin: 0 auto;
}

.checkout-card {
  margin-bottom: 20px;
}

.card-header {
  font-weight: bold;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 地址选择样式 */
.address-selection {
  padding: 15px 0;
}

.address-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border: 2px solid #f0f0f0;
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.address-item:hover {
  border-color: #409eff;
  background-color: #f0f9ff;
}

.address-item.selected {
  border-color: #409eff;
  background-color: #f0f9ff;
}

.address-item:last-child {
  margin-bottom: 0;
}

.address-info {
  flex: 1;
}

.contact-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.contact-name {
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

.contact-phone {
  color: #666;
}

.address-detail {
  color: #333;
  line-height: 1.5;
  margin-bottom: 3px;
}

.address-notes {
  color: #999;
  font-size: 12px;
}

.address-radio {
  margin-left: 15px;
}

.no-address {
  padding: 30px 0;
  text-align: center;
}

.checkout-items {
  padding: 15px 0;
}

.checkout-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px solid #f5f5f5;
}

.checkout-item:last-child {
  border-bottom: none;
}

.item-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.item-info {
  flex: 1;
}

.item-info h4 {
  margin: 0 0 5px 0;
  font-size: 16px;
  color: #333;
}

.item-info p {
  margin: 0 0 5px 0;
  color: #666;
  font-size: 12px;
}

.item-price {
  color: #f56c6c;
  font-weight: bold;
}

.item-quantity {
  color: #666;
  font-weight: bold;
}

.item-subtotal {
  color: #f56c6c;
  font-weight: bold;
  font-size: 16px;
}

.order-summary {
  padding: 15px 0;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 16px;
}

.summary-item:last-child {
  margin-bottom: 0;
}

.total-price {
  color: #f56c6c;
  font-weight: bold;
  font-size: 20px;
}

.checkout-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
  padding: 20px 0;
}

/* 订单列表模式样式 */
.order-filters {
  margin-bottom: 20px;
}

.order-card {
  margin-bottom: 20px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.order-info {
  display: flex;
  gap: 20px;
}

.order-number {
  font-weight: bold;
  color: #333;
}

.order-date {
  color: #666;
}

.order-items {
  padding: 15px 0;
}

.order-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}

.order-item:last-child {
  border-bottom: none;
}

.order-item .item-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

.order-item .item-info {
  flex: 1;
}

.order-item .item-info h4 {
  margin: 0 0 5px 0;
  font-size: 14px;
  color: #333;
}

.order-item .item-info p {
  margin: 0 0 5px 0;
  color: #666;
  font-size: 12px;
}

.order-item .item-price {
  color: #f56c6c;
  font-weight: bold;
}

.order-item .item-quantity {
  color: #666;
}

.order-item .item-subtotal {
  color: #f56c6c;
  font-weight: bold;
  font-size: 14px;
}

.no-items {
  padding: 20px;
  text-align: center;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.order-total {
  color: #666;
  font-size: 14px;
}

.order-total .total-amount {
  color: #f56c6c;
  font-weight: bold;
  font-size: 16px;
}

.order-actions {
  display: flex;
  gap: 10px;
}

.pagination {
  margin-top: 40px;
  text-align: center;
}
</style>
